import React, { Component } from 'react';
import { Form, Button, message, Checkbox, Input } from 'antd';
import { phone as phoneReg } from '@/utils/regexp';
import { withRouter } from 'react-router-dom';
import { getAccount } from '@/utils/cookies';
import { connect } from 'dva';
import LoginWrapper from '@/components/LoginWrapper';

const { AccountFormItem, GetYCodeFormItem, PasswordFormItem } = LoginWrapper;

@connect(({ loading: { models: { register } } }) => ({
  loading: !!register,
}))
@Form.create()
@withRouter
class RegisterForm extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, history } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'register/registerWithMobile',
          payload: values,
        })
          .then(() => {
            message.success('注册成功');
            history.push('/login');
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };

  render() {
    const { form, loading } = this.props;
    const { getFieldDecorator } = form;
    const initialAccount = getAccount();
    const accountRules = {
      rules: [
        {
          required: true,
          message: '请输入正确的手机号',
          pattern: phoneReg,
        },
      ],
      placeholder: '请输入手机号',
    };

    return (
      <div className="form-wrapper">
        <h2>注册</h2>
        <Form onSubmit={this.handleSubmit}>
          <AccountFormItem
            form={form}
            disabled={loading}
            focus
            id="mobile"
            initialValue={initialAccount}
            {...accountRules}
          />
          <GetYCodeFormItem
            disabled={loading}
            focus={!!initialAccount}
            id="captchaCode"
            validField="mobile"
            type="phone"
            serviceType={2}
            form={form}
          />
          <Form.Item>
            {getFieldDecorator('name', {
              rules: [],
            })(<Input placeholder="姓名" className="login-input" />)}
          </Form.Item>
          <PasswordFormItem confirm form={form} placeholder="密码包括6-16位大小写字母数字" />

          <Form.Item>
            {getFieldDecorator('agreement', {
              valuePropName: 'checked',
              normalize: value => value || undefined,
              rules: [
                {
                  required: true,
                  message: '请阅读并同意用户注册协议和隐私条款',
                },
              ],
            })(
              <Checkbox>
                我已阅读并同意
                <a href="/#/register/agreement" target="_blank">
                  《用户注册协议和隐私条款》
                </a>
              </Checkbox>
            )}
          </Form.Item>
          <div className="tc">
            <Button
              className="primary-button"
              disabled={loading}
              htmlType="submit"
              loading={loading}
            >
              {loading ? '请稍候' : '注册'}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}
export default RegisterForm;
